<template>
    <div class="container" @click="handleSwiperClose">
         <div class="wrapper">
             <swiper :option="swiperOption">
                 <!-- slides -->
                 <swiper-slide v-for="(item,index) in imgs" :key="index">
                     <img
                          :src="item"
                          alt=""
                          class="swiper-img"
                     >
                 </swiper-slide>


                 <!-- Optional controls -->
                 <div class="swiper-pagination"  slot="pagination"></div>
             </swiper>
         </div>
    </div>
</template>

<script>
    export default {
        name: "CommonGallary",

        data (){
            return {
                swiperOption:{
                    pagination:'.swiper-pagination',
                    paginationType:'fraction',
                    observer:true,
                    observeParents:true,
                }
            }
        },
        props:{
            imgs:{
                type:Array,
                default () {
                    return [
                        'http://img1.qunarzz.com/wugc/p123/201211/19/a2045d091f02b25493835fbb.png_r_800x800_c59f0eba.png',
                        'http://img1.qunarzz.com/wugc/p238/201306/16/d9090c728fed64eb93835fbb.jpg_r_800x800_7329a802.jpg'
                    ]
                }
            },
        },
        methods:{
            handleSwiperClose () {
                this.$emit('close')
            }
        }
    }
</script>

<style scoped lang="stylus">
    .container >>> .swiper-container
        overflow:inherit
    .container
        display:flex
        flex-direction:column
        justify-content:center
        position: fixed
        top:0
        bottom:0
        right:0
        left:0
        background:#000
        .wrapper
            background:#fff
            /*height:0*/
            /*width:100%*/
            /*padding-bottom:100%*/
            .swiper-img
                width:100%
            .swiper-pagination
                color:#000
                /*bottom:-1rem*/
</style>
